<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-size: 24px;
        }
    </style>
</head>
<body>
    <h1>不可见</h1>
    <h4>不可见</h4>
    <h1>不可见</h1>
    <h4>不可见</h4>
    <h1>不可见</h1>
    <h4>不可见</h4>
    <h1>不可见</h1>
    <h4>不可见</h4>
    <h1>不可见</h1>
    <h4>不可见</h4>
    <h1>不可见</h1>
    <h4>不可见</h4>
    <h1>不可见</h1>
    <h4>不可见</h4>
    <h1>不可见</h1>
    <h4>不可见</h4>
    <h1>不可见</h1>
    <h4>不可见</h4>
    <h1>不可见</h1>
    <h4>不可见</h4>
    <h1>不可见</h1>
    <h4>不可见</h4>
    <h1>不可见</h1>
    <h4>不可见</h4>
    <h1>不可见</h1>
    <h4>不可见</h4>
    <h1>不可见</h1>
    <h4>不可见</h4>
    <h1>不可见</h1>
    <h4>不可见</h4>

    <script>
        let options = {
            root: null, // 根元素，null为视口
            threshold: 0.5 //重叠率 0.0-1.0  重叠率达到要求后触发事件
        },
        callBack = (entries, observer) => {
            entries.forEach(entry => {
                entry.target.innerText = entry.isIntersecting ? '测试': '不可见';
            })
        },
        observer  = new IntersectionObserver(callBack, options);

        let observedList = document.querySelectorAll('h1');
        observedList.forEach(element => {
            observer.observe(element)
        });
    </script>
</body>
</html>
